<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5 form styler</title>
		<style>
			.styler {
				width: 80%;
				max-width: 1400px;
				min-width: 480px;
				margin: 0 auto;
			}
			.styler iframe {
				float: right;
				width: 65%;
				border: none;
				min-height: 400px;
			}
			.styler-controls {
				float: left;
				width: 30%;
			}
			.styler-controls label {
				display: block;
				margin: 4px 0 2px;
			}
			.styler-controls input[type="number"] {
				width: 4em;
				text-align: right;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="../../../js-webshim/minified/extras/modernizr-custom.js"></script>
		<script src="../../../js-webshim/minified/polyfiller.js"></script>
		
		<script>
		$.webshims.setOptions({
			'forms-ext': {
				types: 'number range color'
			}
		});
		$.webshims.polyfill('forms forms-ext details');
		</script>
	</head>
	<body>
		<h1>don't look, work in progress</h1>
		<div class="styler">
			<h2>Range styler</h2>
			<div class="styler-controls">
				<fieldset>
					<legend>range</legend>
					<details open="open" data-type="selector" data-value='.ws-range, input[type="range"]'>
						<summary>default styles</summary>
						<div class="panel">
							<label>width</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="100" max="400" value="300" name="width" />
							</span>
							<input type="hidden" name="width" value="px" />
							
							<label>height</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="1" max="30" value="10" name="height" />
							</span>
							<input type="hidden" name="height" value="px" />
							
							
							<label>border</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="0" max="10" value="0" name="border" />
							</span>
							<input type="hidden" name="border" value="px" />
							<input type="hidden" name="border" value=" solid " />
							<input type="color" value="#666666" name="border" />
							
							<label>border-radius</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" max="25" value="5" name="border-radius" />
							</span>
							<input type="hidden" name="border-radius" value="px" />
							
													
							<label>background</label>
							<input type="color" value="#8a8a8a" name="background" />
							
						</div>
					</details>
				</fieldset>
				<fieldset>
					<legend>range thumb</legend>
					<details open="open" data-type="selector" data-value=".ws-range .ws-range-thumb">
						<summary>default styles</summary>
						<div class="panel">
							<label>width</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="1" max="40" value="20" required name="width" />
							</span>
							
							<input type="hidden" name="width" value="px" />
							
							<label>height</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="1" max="40" value="20" name="height" />
							</span>
							<input type="hidden" name="height" value="px" />
							
							<label>border</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="0" max="10" value="1" name="border" />
							</span>
							<input type="hidden" name="border" value="px" />
							<input type="hidden" name="border" value=" solid " />
							<input type="color" value="#666666" required name="border" />
							
							<label>margin-top</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="0" max="20" value="0" name="margin-top" />
							</span>
							<input type="hidden" name="margin-top" value="px" />
							
							<label>margin-bottom</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" min="0" max="20" value="0" name="margin-top" />
							</span>
							<input type="hidden" name="margin-bottom" value="px" />
							
							<label>border-radius</label>
							<span class="range-number">
								<input type="number" />
								<input type="range" max="50" value="50" required name="border-radius" />
							</span>
							<select name="border-radius">
								<option>%</option>
								<option>px</option>
							</select>
							<label>background</label>
							<input type="color" value="#efefef" required name="background" />
						</div>
					</details>
					<details data-type="selector" data-value=".ws-range.ws-active .ws-range-thumb">
						<summary>:active styles</summary>
						<div class="panel">
							<label>border-color</label>
							<span class="disable-enable">
								<input type="checkbox" checked="" />
								<input type="color" value="#333333" required name="border-color" />
							</span>
							<label>background</label>
							<span class="disable-enable">
								<input type="checkbox" checked="" />
								<input type="color" value="#ffffff" required name="background" />
							</span>
						</div>
					</details>
				</fieldset>
				<fieldset data-type="selector" data-value=".ws-range .ws-range-min">
					<legend>range min/range-progress</legend>
					<div class="panel">
						<label>display</label>
						<select name="display">
							<option>none</option>
							<option>block</option>
						</select>
						
						
						<input type="hidden" name="height" value="100%" />
						
						<label>background</label>
						<input type="color" value="#333333" required name="background" />
					</div>
				</fieldset>
			</div>
			<iframe src="range.html" id="style-show"></iframe>
		</div>
		<script src="styler.js"></script>
		
	</body>
</html>